<template>
    <div>
<!--        搜索框-->
        <form action="/">
            <van-search
                    v-model="value"
                    show-action
                    placeholder="请输入搜索关键词"
                    @search="onSearch"
                    @cancel="onCancel"
                    input-align="center"
                    background="#FD7304"
                    shape="round"
                    @focus="initPage"
            />
        </form>
<!--        历史记录内容-->
        <div class="history_msg">
<!--            <van-button type="primary" size="mini" @click="clear" color="#FD7304" style="margin-top: 15px">清除搜索内容</van-button>-->
            <div class="history" v-if="!isFocus" style="margin-top: 15px">
                <div v-if="historyxs">搜索历史</div>
                <div v-if="search_list.length>0">
                    <ul v-if="historyxs" class="hst">
                        <li v-for="(item,index) in search_list" :key="index" @click="historysearch(item)">
                            {{item}}
                        </li>
                    </ul>

                </div>
                <div style="clear: both"></div>
                <van-button type="primary" size="mini" v-if="historyxs" @click="clearhis" color="#FD7304" style="margin-top: 15px">清空历史记录</van-button>
                <div v-else>暂无搜索记录！</div>
            </div>
        </div>
        <hot></hot>
    </div>
</template>

<script>
    import { Toast } from 'vant';
    import hot from '../hot'
    import { saveSearch } from "../../../utils/cache"; //引用本地存储js
    import storage from "good-storage"; //引入good-storage包

    export default {
        name: "Search",
        components:{
            hot
        },
        data() {
            return {
                value: '',
                list:[],
                isFocus:true,
                search_list:[],//搜索历史纪录
                historyxs:false,
                // isFirst:true
            };
        },
        created() {

        },
        methods: {
            onSearch() {
                sessionStorage.setItem('title',this.value)
                this.$router.push({ name: 'SearchContent',params:{searchContent:this.value}});
                this.$store.commit('ReSearchContent',{SearchTitle:this.value})
                this.$store.dispatch("getSearchListaTitle",{SearchTitle:this.$route.params.searchContent,})
                if (this.value != "") {
                    //搜索框不为空
                    saveSearch(this.value); // 本地存储搜索的内容
                    this.isFocus = true;
                }else{
                    alert('输入内容不能为空')
                }
            },
            onCancel() {
                Toast('取消');
                this.$router.push({ path: '/Index' });
            },
            initPage(){
                this.isFocus = false;
                //为避免重复先清空再添加
                this.search_list = [];
                let searches = storage.get("_search_");
                this.search_list = searches ? searches : [];
                if (this.search_list.length > 0) {
                    this.historyxs = true;
                } else {
                    this.historyxs = false;
                }
            },
            //清空历史记录
            clearhis() {
                storage.remove("_search_");
                this.search_list = [];
                this.historyxs = false;
            },
            //点击历史搜索把搜索的记录添加到good-storage中
            historysearch(item) {
                saveSearch(item);
                this.value = item;
                this.historyxs = false;
            },
            clear() {
                this.value = "";
            }
        },
    }
</script>

<style scoped lang="less">
.history_msg{
    width: 100%;
    height: 150px;
    /*background-color: #FD7304;*/
    .search_content{

    }
}
.hst{
    li{
        float: left;
        font-size: 12px;
        background-color: #888888;
        height: 20px;
        line-height: 20px;
        padding:0px 5px;
        border: 1px solid #FD7304;
        margin-left: 15px;
        border-radius: 5px;
    }
}
</style>